<template>
  <div>
    <a-select
      show-search
      :placeholder="placeholder"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :options="list"
      @search="handleSearch"
      @change="handleChange"
      @dropdownVisibleChange="handleDropdownVisibleChange"
      v-model="selectValue"
      allowClear
    >
      <a-spin v-if="fetching" slot="notFoundContent" size="default" />
    </a-select>
  </div>
</template>

<script>
import {
  userListByNoAuth,
  roleByNoAuth,
  productByNoAuth,
  platformByNoAuth,
  signatureByNoAuth,
  adminByNoAuth
} from '@/api/noAuth'
import { workbenchEpsShotList } from '@/api/login'
import cloneDeep from 'lodash.clonedeep'
import debounce from 'lodash.debounce'

console.log(adminByNoAuth);

export default {
  name: 'oth-select',
  data() {
    return {
      list: [],
      fetching: false,
      timeout: null,
      selectValue: '',
      fun: {
        userListByNoAuth,
        roleByNoAuth,
        productByNoAuth,
        platformByNoAuth,
        signatureByNoAuth,
        adminByNoAuth
      },
    }
  },

  components: {},
  props: {
    form: {
      type: Object,
      require: true,
    },

    value: {
      type: String | Number,
      event: 'changes',
    },
    addition: {
      type: Object,
      default: () => {
        return {}
      },
    },
    placeholder: {
      type: String,
      default: '输入选择',
    },
    funStr: {
      type: String,
      default: '',
    },
    IDStr: {
      type: String,
      default: 'id',
    },
    dataKey:{
      type: String,
      default: ''
    },
    nameKey:{
      type: String,
      default: ''
    }
    
  },
  created() {
    this.handleSearch = debounce(this.getOption, 500)
  },
  mounted() {
    if (this.value) {
      this.getOption('', this.value, true)
    }
    this.selectValue = this.value
  },
  computed: {
    requestFun() {
      return this.fun[this.funStr]
    },
  },
  watch: {
    value: function (n) {
      if (!n) {
        this.selectValue = undefined
        return false
      }
      if (n == this.selectValue) return false
      this.selectValue = n
      let index = this.list.findIndex((v) => v.value == n)
      if (index == -1) {
        this.getOption('', n)
      }
    },
  },
  methods: {
    handleDropdownVisibleChange(open) {
      console.log(111);
      if (open && this.list.length === 0) {
        this.getOption('', this.value, true)
      }
    },
    handleSearch(a_val) {},
    getOption(a_val, a_id, a_init) {
      let self = this

      console.log(self.requestFun);
      let nameKey = self.nameKey
      let dataKey = self.dataKey
      
      let addition = cloneDeep(self.addition)
      let data = {  pageNum: 1, id: a_id, pageSize: a_init ? 10 : 100, ...addition }

      nameKey ? data[nameKey] = a_val : data.name = a_val

      self.fetching = true
      if (!self.requestFun) return false
      self
        .requestFun(data)
        .then((res) => {
          let data = dataKey ? res.data[dataKey] : res.data.data
          self.list = data.map((v) => {
            return {
              label: v.name || v,
              value: v.id || v,
            }
          })
        })
        .finally(() => (self.fetching = false))
    },
    handleChange(val) {
      // v-decorator 生效
      this.$emit('change', val)
      // v-modal生效
      this.$emit('input', val)
    },
  },
  destroyed() {},
}
</script>